<template>
  <!-- <p style="font-size: 30px;color: aqua;"> hhhhhhh</p> -->
  <p v-text="test"></p>
  <p v-html="test"></p>
  <h1>v-on事件</h1>
  <h2>{{ number }}</h2>
  <div class="button">
    <button v-on:click="number++">内连加1</button>
    <button v-on:click="increase">无参数函数加1</button>
    <button v-on:click="add(1)">有参函数加1</button>
    <button v-on:click="add(3)">有参函数加3</button>
    <button @click="add(5)">简写事件加5</button>
  </div>
  <p id="p">哈哈哈哈</p>
</template>

<script setup>
  import { ref } from "vue";
  let test = `<p style="font-size: 30px;color: aqua;"> hhhhhhh</p>`
  const number = ref(0);
  function increase(){
    number.value++;
  }
  function add(val){
    number.value+=val
  }
</script>

<style scoped>
.button{
  display: flex;
  justify-content: space-between;
}
#p{
  width: 40px;
  height: 15px;
  background: aquamarine;
  border-radius: 20px;
}
</style>
  